<!--  -->
<script lang="ts" setup>
import {} from 'vue'
</script>

<template>
  <div class="row">
    <div class="example1">
      <h1>黑板报</h1>
      <div class="example1-bg">
        <h1>Lorem Ipsum Dolor</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
          nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
          volutpat.
        </p>
        <p>
          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <p>
          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
          suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
    <div class="example2">
      <h1>改变背景图大小</h1>
      <div class="example2-bg"></div>
      <img
        src="https://www.runoob.com/try/demo_source/img_flwr.gif"
        alt="原图"
      />
    </div>
  </div>
  <h1 style="text-align: center">background-origin</h1>
  <div class="row row2">
    <div class="example3">background-origin: border-box;</div>
    <div class="example4">background-origin: padding-box;</div>
    <div class="example5">background-origin: content-box;</div>
  </div>
  <h1 style="text-align: center">background-clip</h1>
  <div class="row row3">
    <div class="example6">background-clip: border-box;</div>
    <div class="example7">background-clip: padding-box;</div>
    <div class="example8">background-clip: content-box;</div>
    <div class="example9">background-clip默认值</div>
  </div>
</template>

<style lang="scss" scoped>
.row {
  display: flex;
}

.example1 {
  flex: 1;
  text-align: center;
  .example1-bg {
    text-align: left;
    background-image: url('https://www.runoob.com/try/demo_source/img_flwr.gif'),
      url('https://www.runoob.com/try/demo_source/paper.gif');
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
  }
}
.example2 {
  flex: 1;
  text-align: center;
  .example2-bg {
    widows: 100%;
    height: 70px;
    background: url('https://www.runoob.com/try/demo_source/img_flwr.gif');
    background-size: 80px 60px;
    background-repeat: no-repeat;
  }
}

.row2 {
  div {
    margin-left: 10px;
    border: 35px solid rgba($color: #000000, $alpha: 0.1);
    padding: 35px;
    background-image: url('https://www.runoob.com/try/demo_source/smiley.gif');
    background-repeat: no-repeat;
    background-position: left;
  }
}
.example3 {
  flex: 1;
  background-origin: border-box;
}
.example4 {
  flex: 1;
  background-origin: padding-box;
}
.example5 {
  flex: 1;
  background-origin: content-box;
}

.row3 {
  div {
    margin-left: 10px;
    border: 35px solid rgba($color: #000000, $alpha: 0.1);
    padding: 35px;
  }
}
.example6 {
  flex: 1;
  background: salmon;
  background-clip: border-box;
}
.example7 {
  flex: 1;
  background: salmon;
  background-clip: padding-box;
}
.example8 {
  flex: 1;
  background: salmon;
  background-clip: content-box;
}
.example9 {
  flex: 1;
  background: salmon;
}
</style>
